<template>
  <div class="app-container">
    <el-card>
      <div class="header_wrapper">
        <div class="header_left">
          <div class="header_img">
            <img src="@/assets/common/营业执照.jpg" alt="" />
          </div>
          <div class="header_title">
            <div>宁波北仑大碶文诺机械厂</div>
            <div class="p_text">
              <img src="@/assets/common/我的积分.png" alt="" /> 我的积分:
              <span>1085</span>
              <el-button
                type="info"
                round
                disabled
                size="small"
                style="background: #f3f3f3; color: #a7a7a7; margin-left: 16px"
                >已签到</el-button
              >
            </div>
          </div>
        </div>
        <div class="header_right">
          <span class="line"></span>
          <div style="margin-left: 37px">
            <p>
              <span class="lf"
                >今天已获得<span class="color_2"> 5 </span>积分</span
              >
            </p>
            <p>
              <span class="lf">
                您还可免费获得
                <span class="color_2"> 125 </span>积分
              </span>
              <a href="" style="color: #3691fb">[收支明细]</a>
            </p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <h4>我的任务</h4>
      <div class="task_wrapper">
        <template>
          <div class="task_list" v-for="task in taskList.length" :key="task.alias">
          <div class="task_img">
            <img src="@/assets/common/每日签到.png" alt="" />
          </div>
          <div class="task_text">
            <div style="padding-bottom: 10px">
              每日签到<span class="daily">(日常任务)</span>
            </div>
            <span class="points">积分：5 / 次</span>
          </div>
          <div class="task_btn">
            <el-button type="info" round>已完成</el-button>
          </div>
        </div>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskList: [
        {
          alias: "sign_in",
          name: "每日签到",
          points: 5,
          daily: 1,
          max_perday: 1,
          done_total: 1,
          is_done: 1,
        },
        {
          alias: "bind_weixin",
          name: "绑定微信账号",
          points: 5,
          daily: 0,
          max_perday: 0,
          done_total: 0,
          is_done: 0,
        },
        {
          alias: "upload_logo",
          name: "上传logo",
          points: 30,
          daily: 0,
          max_perday: 0,
          done_total: 1,
          is_done: 1,
        },
        {
          alias: "auth",
          name: "通过企业认证",
          points: 100,
          daily: 0,
          max_perday: 0,
          done_total: 0,
          is_done: 0,
        },
        {
          alias: "upload_img",
          name: "上传企业风采",
          points: 20,
          daily: 0,
          max_perday: 0,
          done_total: 0,
          is_done: 0,
        },
        {
          alias: "handle_resume",
          name: "处理3天内收到的简历",
          points: 30,
          daily: -1,
          max_perday: 0,
          done_total: 0,
          is_done: 0,
        },
        {
          alias: "reg",
          name: "注册账号",
          points: 50,
          daily: 0,
          max_perday: 0,
          done_total: 1,
          is_done: 1,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.header_wrapper {
  display: flex;
  margin: 23px 0;
  .header_left {
    display: flex;
    width: 700px;
    .header_img {
      margin: 0 20px;
      width: 70px;
      height: 70px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .header_title {
      p {
        font-size: 18px;
        color: #333;
      }
      .p_text {
        margin-top: 20px;
        color: #333;
        font-size: 14px;
        padding-left: 18px;
        position: relative;
        line-height: 31px;
        img {
          position: absolute;
          left: 0;
          top: 8px;
        }
      }
    }
  }
  .header_right {
    flex: 1;
    display: flex;
    .line {
      width: 1px;
      height: 60px;
      display: inline-block;
      background: #f3f3f3;
    }
    .lf {
      width: 220px;
      display: inline-block;
      color: #333;
      .color_2 {
        color: #fa7445;
      }
    }
  }
}

.task_wrapper {
  display: flex;
  flex-wrap: wrap;
  .task_list {
    width: 48%;
    border: 1px solid #f3f3f3;
    display: flex;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    padding: 16px 0;
    .task_img {
      flex: 1;
      margin-left: 28px;
      img {
        width: 46px;
        height: 46px;
      }
    }
    .task_text {
      flex: 8;
      p {
        padding-bottom: 10px;
        color: #333;
        font-size: 16px;
        .daily {
          color: #999;
          font-size: 16px;
        }
      }
      .points {
        color: #999;
        font-size: 14px;
      }
    }
    .task_btn {
      flex: 1;
    }
  }
}
</style>
